<template>
  <div>
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="handleEdit()">新建</a-button>
    </div>
    <s-table
      ref="tableRef"
      size="default"
      rowKey="key"
      :columns="columns"
      :data="loadData"
      :alert="options.alert"
      :rowSelection="options.rowSelection"
    >
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="addTrain(record)">新增训练</a>
          <a-divider type="vertical"/>
        </template>
        <a @click="handleEdit(record)">查看报告</a>
      </span>
    </s-table>
    <add-dialog
      ref="addDialogRef"
      :visibleAdd="visible"
      @cancel="handleCancel"
      @ok="handleOk">
    </add-dialog>
  </div>
</template>

<script>
  import moment from 'moment'
  import { STable } from '@/components'
  import { getServiceList } from '@/api/manage'
  import AddDialog from '@/views/form/project/add-dialog'

  export default {
    name: 'TableList',
    components: {
      AddDialog,
      STable
    },
    data() {
      return {
        visible: false,
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '序号',
            scopedSlots: { customRender: 'serial' }
          },
          {
            title: '项目名称',
            dataIndex: 'no'
          },
          {
            title: '描述',
            dataIndex: 'description'
          },
          {
            title: '状态',
            dataIndex: 'status',
            needTotal: true
          },
          {
            title: '训练质量',
            dataIndex: 'updatedAt',
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '200px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          console.log('loadData.parameter', parameter)
          return getServiceList(Object.assign(parameter, this.queryParam))
            .then(res => {
              return res.result
            })
        },
        selectedRowKeys: [],
        selectedRows: [],
        options: {
          alert: {
            show: true, clear: () => {
              this.selectedRowKeys = []
            }
          },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange
          }
        },
        optionAlertShow: false
      }
    },
    created() {

    },
    methods: {
      addTrain() {
        this.$router.push({ path: '/project/detail' })
      },
      handleEdit() {
        this.visible = true
      },
      handleOk() {
        const form = this.$refs.addDialogRef.form
        form.validateFields((errors, values) => {
          if (!errors) {
            console.log(values)
            // this.visible = false
            // // 重置表单数据
            // form.resetFields()
            // // 刷新表格
            // this.$refs.tableRef.refresh()
            // this.$message.info('新增成功')
          }
        })
      },
      handleCancel() {
        this.visible = false
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
    }
  }
</script>
